var meizu_img = document.getElementsByClassName('meizu_img');
var banner = document.getElementById('banner');
var banner_mid = document.getElementById('banner_mid');
var click_button = document.getElementsByClassName('click_button');
var left = document.getElementsByClassName('left');
var right = document.getElementsByClassName('right');

var color =['#E0E7F9','#E4E4E4','#EBEBEB','#E7FAFF','#FFFFFF','#121212'];

var num =0;

function run () {
	
	for (var i =0 ; i<meizu_img.length;i++) {
		meizu_img[i].style.display="none";
		click_button[i].style.backgroundColor="rgba(0,0,0,0)";
	};
	meizu_img[num].style.display="block";
	banner.style.backgroundColor=color[num];
	click_button[num].style.backgroundColor="#00C3F5";
	if(num == meizu_img.length-1){
		num=0;
	}else{
		num++;
	}

}
run();
var time = setInterval(run, 2000);

for (var i = 0; i<click_button.length; i++) {

	click_button[i].onmouseover = function  () {
		this.style.backgroundColor="rgba(0,195,245,1)";
	}

	click_button[i].onmouseout = function  () {
		this.style.backgroundColor="rgba(0,195,245,0)";
	}

	buttonclick(i);
};

function buttonclick (i) {
	click_button[i].onclick = function  () {
		num = i;
		run();
	}
}
banner_mid.onmouseover = function  (argument) {
	clearInterval(time);
	left[0].style.display="block";
	right[0].style.display="block";
	left[0].style.backgroundColor="rgba(132,132,132,1)";
	right[0].style.backgroundColor="rgba(132,132,132,1)";
}
banner_mid.onmouseout = function  (argument) {
	time = setInterval(run, 2000);
	left[0].style.display="none";
	right[0].style.display= "none";
}
right[0].onclick =function(){
	run();
}
left[0].onclick = function(){
	if(num==1){
		num=7;
	}
	if(num==0){
		num=6;

	}
	num-=2;
	run();
}
